<template>
    <view>
        <!--#ifdef APP-PLUS-->
        <view class="lz-status_bar">
            <view class="lz-top_view"></view>
        </view>
        <!--#endif-->
        <view class="kaoshi-head" v-if="mode == 3">
            <view class="kaoshi-head-top">
                <view class="kaoshi-head-left">
                    <navigator open-type="navigateBack" @tap="$navigateBack">
                        <view class="iconfont icon-zuojiantou"></view>
                    </navigator>
                </view>
            </view>
            <view class="kaoshi-logo">
                <image :src="static_media.img01" class="kaoshi-logo-img"></image>
            </view>
            <view class="kaoshi-login">
                <view class="kaoshi-login-content">
                    <!-- 手机表单登录 start -->
                    <view class="kaoshi-login-title">
                        <view :class="{ 'kaoshi-login-title-active': form_type == 0, 'kaoshi-login-title-other': form_type != 0 }"
                              @tap="form_type = 0">登录
                        </view>
                        <view :class="{ 'kaoshi-login-title-active': form_type == 1, 'kaoshi-login-title-other': form_type != 1 }"
                              @tap="form_type = 1">注册
                        </view>
                    </view>
                    <view v-if="form_type == 0" class="kaoshi-input-group">
                        <view class="kaoshi-input-row border">
                            <m-input class="m-input" type="text" clearable v-model="account"
                                     placeholder="请输入账号"></m-input>
                        </view>
                        <view class="kaoshi-input-row">
                            <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
                        </view>
                    </view>
                    <view v-if="form_type == 1" class="kaoshi-input-group">
                        <view class="kaoshi-input-row border kaoshi-login-flex">
                            <m-input style="flex: 1;" type="text" clearable v-model="account"
                                     placeholder="请输入用户名"></m-input>
                            <!--<view class="kaoshi-yanzheng" @tap="!safety.state ? fnGetPhoneCode() : ''">{{ (!safety.state && '获取验证码') || safety.time + ' s' }}</view>-->
                        </view>
                        <!--						短信验证码暂时不需要填写，如有需要可以对接短信平台-->
                        <!--						<view class="kaoshi-input-row border">-->
                        <!--							<m-input type="text" clearable v-model="code" placeholder="请输入短信验证码"></m-input>-->
                        <!--						</view>-->
                        <view class="kaoshi-input-row">
                            <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
                        </view>
                    </view>
                    <view class="kaoshi-login-button" v-if="form_type == 0">
                        <button type="primary" class="kaoshi-primary" @tap="bindLogin">登录</button>
                    </view>
                    <!-- 隐私政策页面没做，但是勾选功能是好使的，如果需要可以改下就用 -->
                    <!-- <view v-if="form_type == 1" class="kaoshi-xieyi-flex">
                        <checkbox value="cb" :checked="xieyi" class="kaoshi-xieyi-check" @tap="xieyi = !xieyi" />
                        <view>我已阅读同意</view>
                        <view class="kaoshi-xieyi-text">《<view @tap="$openrul('/pages/auth/xieyi/xieyi')" class="kaoshi-xieyi">用户协议</view>和<view @tap="$openrul('/pages/auth/xieyi/zhengce')"
                             class="kaoshi-xieyi">隐私政策</view>》</view>
                    </view> -->
                    <view class="kaoshi-login-button" v-if="form_type == 1">
                        <button type="primary" class="kaoshi-primary" @tap="creaet_user">注册</button>
                    </view>
                    <view class="kaoshi-login-forget">
                        <!--	忘记密码需要短信验证码，暂时注释了，功能可用	-->
                        <!--	<navigator url="/pages/auth/changePassword/index" class="kaoshi-password">忘记密码?</navigator>-->
                    </view>
                </view>
            </view>
        </view>
		
		<view v-else>
			<view class="layout">
				<image :src="static_media.img02" class="ydy"></image>
				<button class="ydy-button" @tap="Shouquan=true">微信登录</button>
				<view class="ydy-b">您需要授权才能正常使用此功能，我们承诺您的信息只应用在本平台，不做其他无关使用。</view>
			</view>			
		</view>
		<get-authorize v-if="Shouquan" @if_show="ifShow" @next_order="nextOrder"></get-authorize>
    </view>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import mInput from "@/components/m-input.vue";
    import neilModal from '@/components/neil-modal/neil-modal.vue';
	import getAuthorize from '@/components/get-authorize/get-authorize.vue'

    export default {
        components: {
            mInput,
            neilModal,
			getAuthorize
        },
        data() {
            return {
				mode:1,//程序编译版本：mode：3为账号密码登录
                // xieyi: false,
				Shouquan:false,
                showmodal: false,
                account: "",
                password: "",
                accountReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, // /^[A-Za-z0-9]+$/,
                passwordReg: /^\w+$/,
                code: "",
                safety: {
                    state: false,
                    interval: null,
                    time: 60
                },
                phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                form_type: 0, // 0 登录；1 注册

                rawData: {}
            };
        },
        computed: {
            ...mapState(["userinfo", "forcedLogin", "subject"]),
            static_media() {
                return {
                    img01: this.$myConfig.localMedia + '/static/img/login.png',
                    img02: this.$myConfig.localMedia + '/static/img/ydy.jpg'
                }
            }
        },
        onLoad(opts) {
			this.mode = this.$myConfig.mode
            if (opts && opts.form_type) {
                this.form_type = opts.form_type
            }
			if(this.userinfo && this.userinfo.token){
				this.toMain()
			}
			//以下是账号 密码登录的用法  微信授权登录不需要
/* 			if (this.userinfo && this.userinfo.mobile) {
			    this.account = this.userinfo.mobile;
			} */
        },
		onShow(){
		},
        methods: {
            noop() {
            },
            /**
             * 获取验证码
             */
            async fnGetPhoneCode() {
                //this.phoneReg.test(this.account) 验证手机号格式，如不使用短信验证码方式注册，可改为自己需要的账号规则
                if (this.phoneReg.test(this.account)) {
                    uni.showToast({
                        title: "正在发送验证码",
                        icon: "loading"
                    });

                    let res = await this.$myHttp.post({
                        url: this.$myHttp.urlMap.mobileCode,
                        data: {
                            mobile: this.account,
                            event: "register"
                        }
                    });
                    if (res.code === 1) {
                        // 成功后显示倒计时60s后可在点击
                        this.safety.state = true;
                        // 倒计时
                        this.safety.interval = setInterval(() => {
                            if (this.safety.time-- <= 0) {
                                this.safety.time = 60;
                                this.safety.state = false;
                                clearInterval(this.safety.interval);
                            }
                        }, 1000);

                        uni.showToast({
                            title: "发送成功",
                            icon: "success"
                        });
                    }
                } else {
                    uni.showToast({
                        title: "手机号不正确",
                        icon: "none"
                    });
                }
            },
            async creaet_user() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: "none",
                        title: "账号最短为 5 个字符"
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: "none",
                        title: "密码最短为 6 个字符"
                    });
                    return;
                }
                // if (this.code.length < 4) {
                // 	uni.showToast({
                // 		icon: "none",
                // 		title: "验证码最短为 4 个字符"
                // 	});
                // 	return;
                // }
                // if (this.xieyi == false) {
                // 	uni.showToast({
                // 		icon: "none",
                // 		title: "请同意《用户协议和隐私政策》再注册"
                // 	});
                // 	return;
                // }
                let res = await this.$myHttp.post({
                    url: this.$myHttp.urlMap.register,
                    data: {
                        username: this.account,
                        // captcha: this.code,
                        password: this.password
                    }
                });

                if (res.code === 1) {
                    this.$myUtils.$prompt.showToast({
                        icon: "none",
                        title: "注册成功"
                    });
                    setTimeout(() => {
                        this.form_type = 0;
                    }, 1500);
                }
            },
            async bindLogin() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: "none",
                        title: "账号最短为 5 个字符"
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: "none",
                        title: "密码最短为 6 个字符"
                    });
                    return;
                }
                /**
                 * 下面简单模拟下服务端的处理
                 * 检测用户账号密码是否在已注册的用户列表中
                 * 实际开发中，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
                 */
                const data = {
                    account: this.account,
                    password: this.password
                };
                const valid = await this.$myUserLogin.login(data);
                if (valid) {
                    //如果已经选择了科目，直接进入首页，否者进入选择科目页面
                    this.toMain();
                }
            },
            toMain() {
                // 判断是否选择了科目
                if (this.subject && this.subject.id && this.subject.id !== 0) {
                    // 进入首页
                    this.$myUtils.$router.switchTab({
                        url: "/pages/index/index"
                    });
                } else {
                    // 进入选择科目
                    this.$myUtils.$router.navigateTo({
                        url: "/pages/auth/choiceSubject/index"
                    });
                }
            },
			//授权完毕后继续调用之前的方法
			nextOrder(data){
				this.$myUtils.$router.switchTab({
				    url: "/pages/index/index"
				});
			},
			ifShow(data){
			    this.Shouquan=data
			},
        }
    };
</script>

<style>
    page {
        background: #fff;
    }

    .kaoshi-head {
        border-bottom: none;
        background: #fff
    }

    .kaoshi-head-top .kaoshi-head-left {
        color: #000;
    }

	.kaoshi-logo {
		text-align: center;
	}

	.kaoshi-logo-img {
		width: 86px;
		height: 86px;
	}

    .kaoshi-login {
        top: 170px;
        position: absolute;
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
        background: #fff;
    }

    .kaoshi-login-content {
        margin-top: 22px;
        margin-right: 22px;
        margin-left: 22px;
    }

    .kaoshi-login-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        height: 42px;
        line-height: 42px;
    }

	.kaoshi-login-title-active {
		border-bottom: solid 2px #3c7bfc;
		width: 50%;
		text-align: center;
		color: #000;
		font-weight: bold;
	}

	.kaoshi-login-title-other {
		border-bottom: solid 2px #f5f5f5;
		text-align: center;
		width: 50%;
		color: #c7c7c7;
	}

    .kaoshi-login-flex {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .kaoshi-login-button {
        margin-top: 15px;
    }

    .kaoshi-login-forget {
        color: #000;
        font-size: 14px;
        margin: 12px 0;
    }

    .kaoshi-input-group {
        margin-top: 4px;
    }

    .kaoshi-input-group::before {
        background-color: #fff;
    }

	.kaoshi-input-group::after,
	.kaoshi-input-row.border::after {
		background-color: #f6f7f9 !important;
	}


	.kaoshi-primary {
        background: #3c7bfc !important;
        color: #fff !important;
        border-radius: 30px;
        box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
    }

    .kaoshi-yanzheng {
        width: 81px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        color: #fff;
        background: #3c7bfc;
        text-align: center;
        border-radius: 16px 16px 16px 0;
    }

    .kaoshi-password {
        text-align: right;
        color: #7d7d7d;
    }

    .border {
        border-bottom: solid 1px #fbfbfb;
    }

    .kaoshi-xieyi {
        font-weight: bold;
        text-decoration: underline;
        color: #3c7bfc;
    }

	.kaoshi-xieyi-flex {
		font-size: 13px;
		display: flex;
		align-items: center;
		color: #cecece;
		margin-top: 5px
	}

	.kaoshi-xieyi-check {
        transform: scale(0.7);
        color: #4c8cf8
    }

    .kaoshi-xieyi-text {
        color: #000;
        display: flex;
        align-items: center;
    }
.layout{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.ydy{
		width: 90%;
		height: 484px;
		margin: 0 auto;
		margin-top: 14px;
	}
	.ydy-button{
		background: #3c7bfc;
		width: 82%;
		margin: 0 auto;
		text-align: center;
		font-size: 17px;
		padding: 3px;
		color: #fff;
		border-radius: 5px;
		letter-spacing: 2px;
	}
	.ydy-b{
		font-size: 13px;
		width: 83%;
		color: #888888;
		text-align: center;
		margin-top: 17px;
		line-height: 19px;
	}
</style>
